import path from "path";
import { $context } from "@ap/extension";
import * as vscode from "vscode";

export default function openInternetAudio(name: string, audioUrl: string) {
  const panel = vscode.window.createWebviewPanel(
    "arenaPro",
    name,
    vscode.ViewColumn.Two,
    {
      enableScripts: false,
      retainContextWhenHidden: false,
    },
  );
  panel.webview.html = getWebviewContent(audioUrl);
  panel.iconPath = vscode.Uri.file(
    path.join($context.extensionPath, "image", "arena.svg"),
  );
}

function getWebviewContent(audioUrl: string): string {
  return `
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body { margin: 0; padding: 0; }
        </style>
    </head>
    <body>
        <video controls="" autoplay="" name="media" style="    position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; max-height: 100%; max-width: 100%; margin: auto;">
            <source src="${audioUrl}" type="audio/mpeg">
            <source src="${audioUrl}" type="audio/ogg">
            <embed height="100%" width="100%" src="${audioUrl}">
        </video>
    </body>
    </html>
`;
}
